<template>
  <Modal v-model="modal" title="门店数据" :width="1000">
    <Tabs v-model="tab" type="card" @on-click="onChange">
      <TabPane label="16寸及以上(规定花纹)入库明细" name="tab1">
        <p class="mb">数据统计： {{total1}}</p>
        <Table
          stripe
          :columns="columns" 
          :data="data1">
          </Table>
      </TabPane>
      <TabPane label="门店3-4月任务完成/指标" name="tab2" v-if="isNewStore">
        <p class="mb">数据统计： {{total2}}</p>
        <Table
          stripe
          :columns="columns" 
          :data="data2">
          </Table>
      </TabPane>
      <TabPane label="门店3月任务完成/指标" name="tab3" v-if="!isNewStore">
        <p class="mb">数据统计： {{total3}}</p>
        <Table
          stripe
          :columns="columns" 
          :data="data3">
          </Table>
      </TabPane>
      <TabPane label="门店4月任务完成/指标" name="tab4" v-if="!isNewStore">
        <p class="mb">数据统计： {{total4}}</p>
        <Table
          stripe
          :columns="columns" 
          :data="data4">
          </Table>
      </TabPane>
    </Tabs>
    <div slot="footer">
        <Button @click="modal = false" size="large" type="text">关闭</Button>
    </div>
</Modal>
</template>
<script>
import { clearEmpty } from '@/util'
export default {
  data() {
    return {
      id: null,
      modal: false,
      btnDisabled: false,
      tab: 'tab1',
      columns: [{
        align: 'center',
        key: 'productName',
        title: '商品',
        align: 'center',
        minWidth: 160
      }, {
        title: '数量',
        key: 'totalQuantity',
        align: 'center',
        width: 100
      }],
      isNewStore: false,
      num: 1,
      total1: 0,
      data1: [],
      total2: 0,
      data2: [],
      total3: 0,
      data3: [],
      total4: 0,
      data4: []
    };
  },
  methods: {
    openModal(id, isNewStore) {
      this.modal = true;
      this.id = id
      this.isNewStore = isNewStore
      this.reset()
      this.getInfo()
    },
    closeModal() {
      this.modal = false;
    },
    onChange() {
      switch (this.tab) {
        case 'tab1':
          this.num = 1
        break;
        case 'tab2':
          this.num = 2
        break;
        case 'tab3':
          this.num = 3
        break;
        case 'tab4':
          this.num = 4
        break;
      }
      if (!this['data' + this.num].length) this.getInfo(this.id)
    },
    reset() {
      this.num = 1
      this.total1 = 0
      this.data1 = []
      this.total2 = 0
      this.data2 = []
      this.total3 = 0
      this.data3 = []
      this.total4 = 0
      this.data4 = []
    },
    getInfo() {
      let param = {
        giftType: 1,
        storeId:  this.id,
        month: null,
        year: null
      }
      let url = this.tab === 'tab1' ?  '/report/purch_gift_statistics/statistic_product' : '/report/purch_gift_statistics/task_product'
      if (this.tab === 'tab1' || this.tab === 'tab2') {
        param.month = null
        param.year = null
      }
      if (this.tab === 'tab3') {
        param.year = 2021
        param.month = 3
      }
      if (this.tab === 'tab4') {
        param.year = 2021
        param.month = 4
      }
      param = clearEmpty(param)
      this.$ajaxGet(url, param).then(data => {
        switch (this.tab) {
          case 'tab1':
            this.num = 1
          break;
          case 'tab2':
            this.num = 2
          break;
          case 'tab3':
            this.num = 3
          break;
          case 'tab4':
            this.num = 4
          break;
        }
        this['data' + this.num] = data
        this['total' + this.num] = data.reduce((prev, next, index) => {
          return prev + Number(next.totalQuantity)
        }, 0)
      })
    }
  }
}
</script>

